<template>
	<view class="userFamilyLayout">
		<!-- 用户家庭管理管理 -->
		<view class="list">
			<!-- 表头 -->
			<view class="title">可使用的家庭关系</view>
			<view class="row rowText">
				<view class="left1">家庭名称</view>
				<view class="left2">用户名称</view>
				<view class="left3">管理操作</view>
			</view>
			<view class="row" v-for="userFamily in userFamilyUser" :key="userFamily.id">
				<view class="left1">{{userFamily.familyName}}</view>
				<view class="left2">{{userFamily.userName}}</view>
				<view class="left3">
					<button type="warn" size="mini" @click="userFamilyOwnerRemove(userFamily.id)">删除</button>
				</view>
			</view>
			<!-- 表头 -->
			<view class="title">可管理的家庭关系</view>
			<view class="row rowText">
				<view class="left1">家庭名称</view>
				<view class="left2">用户名称</view>
				<view class="left3">管理操作</view>
			</view>
			<view class="row" v-for="userFamily in userFamiliyOwner" :key="userFamily.id">
				<view class="left1">{{userFamily.familyName}}</view>
				<view class="left2">{{userFamily.userName}}</view>
				<view class="left3">
					<button type="warn" size="mini" @click="userFamilyOwnerRemove(userFamily.id)">删除</button>
				</view>
			</view>
		</view>
		<!-- 创建家庭关系 -->
		<view class="saveLayout" v-if="isSave">
			<input placeholder="请输入受邀人手机号" v-model="new_user_family.phoneNumber" />
			<button type="primary" @click="getUserId">查询账户是否存在</button>
			<view class="title">您邀请的账户是:{{new_user_family.userName}}</view>
			<uni-data-select placeholder="请选择邀请加入的家庭" :localdata="selectFamilies" v-model="new_user_family.familyId" />
			<view class="button">
				<button @click="onSave">保存</button>
				<button @click="cancelSave">取消</button>
			</view>
		</view>
		<button class="button" type="primary" @click="save" v-show="!isSave">创建家庭关系</button>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onShow } from "@dcloudio/uni-app";
	import { createUserFamily, deleteUserFamily, readUserFamilyByOwner, readUserFamilyByUser } from "@/services/sysUserFamilyApi";
	import { getStore } from "@/utils/getToken";
	import { UserFamily } from "@/types/user_family";
	import { readFamily } from "@/services/sysFamilyApi";
	import { getUser } from "@/services/sysUserApi";

	/**
	 * 公共数据获得:
	 * 获取familyId选择的列表,创建关系时使用,可管理的所有家庭
	 * 查询家庭数据,根据sysUserId查询所有可管理的家庭,id数据来自登陆后的token
	 */
	let selectFamilies = ref()                            // 创建关系时,需要定义family_id,由下拉选择框选择
	function getSelectFamilyList() {
		readFamily(getStore('id')).then(res => {
			selectFamilies.value = res.map(item => {          // 点击创建时,获取selectFamilies下拉框渲染数据
				return {
					value: item.id,
					text: item.familyName
				}
			})
		})
	}

	/**
	 * 公共数据获得:
	 * 根据手机号,查询sysUser,其中userId返回,userName显示
	 * getUser带两个缺省的参数,如果缺省第一个,需要占位
	 * 回调值赋值
	 */
	function getUserId() {
		getUser("", new_user_family.value.phoneNumber).then(res => {
			if (res == null) {
				uni.showToast({
					title: '用户不存在'
				})
			} else {
				new_user_family.value.userId = res.id.toString()
				new_user_family.value.userName = res.userName
			}
		})
	}

	/**
	 * 新增家庭关系
	 */
	let isSave = ref(false)
	let new_user_family = ref<UserFamily>({})
	function save() {                                   // 打开创建窗口点击事件函数
		getSelectFamilyList()                             // 获取下来菜单数据
		isSave.value = true
	}
	function cancelSave() {
		isSave.value = false
	}
	function onSave() {                                  // 保存的按钮点击时间函数
		createUserFamily(new_user_family.value.userId, new_user_family.value.familyId).then(res => {
			uni.showToast({
				title: res
			})
			getUserFamilyByOwner()
			getUserFamilyByUser()
			isSave.value = false
			new_user_family.value.familyId = ''
			new_user_family.value.userId = ''
			new_user_family.value.userName = ''
		})
	}

	/**
	 * 删除家庭关系
	 */
	function userFamilyOwnerRemove(id : number) {
		uni.showModal({
			title: "是否确认删除?",
			content: "本删除为逻辑删除",
			cancelColor: "#999",
			confirmColor: "#ff0000",
			success: function (res) {
				if (res.confirm) {
					deleteUserFamily(id).then(res => {
						uni.showToast({                                 // 弹出结果
							title: res
						})
						getUserFamilyByOwner()                          // 删除成功后刷新数据
						getUserFamilyByUser()
					})
				}
			}
		})
	}

	/**
	 * 查询家庭,户主查询
	 */
	let userFamiliyOwner = ref([])
	function getUserFamilyByOwner() {
		readUserFamilyByOwner(getStore('id')).then(res => {
			userFamiliyOwner.value = res
		})
	}

	/**
	 * 查询家庭,用户查询
	 */
	let userFamilyUser = ref([])
	function getUserFamilyByUser() {
		readUserFamilyByUser(getStore('id')).then(res => {
			userFamilyUser.value = res
		})
	}

	onShow(() => {
		getUserFamilyByOwner()
		getUserFamilyByUser()
	})
</script>

<style lang="scss" scoped>
	.userFamilyLayout {
		.list {
			width: 730rpx;
			margin: 10rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fafafa;

			.title {
				height: 80rpx;
				display: flex; // 一个row里面带了2个view，布局方式:弹性布局
				justify-content: center; // 水平居中
				align-items: center; // 垂直居中			
				border-radius: 15rpx;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
				background-color: #dd0;
			}

			.row {
				display: flex; // 一个row里面带了2个view，布局方式:弹性布局
				height: 100rpx;
				border-top: 1px solid#eee;
				align-items: center; // 垂直居中
				text-align: center; // 文字水平居中
				font-size: 28rpx; // 字体大小
				color: #333; // 字体颜色

				.left1 {
					width: 35%;
				}

				.left2 {
					width: 30%;
				}

				.left3 {
					width: 35%;
				}
			}

			.rowText {
				border-radius: 15rpx;
				background-color: #ddd;
			}
		}

		.button {
			margin: 40rpx 120rpx; //两个参数 上下/左右
			height: 80rpx;
		}

		.saveLayout {
			width: 730rpx;
			margin: 10rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);

			input {
				height: 80rpx;
				margin: 20rpx 60rpx; // 外边距，两个参数(上下/左右)
				padding: 2rpx 20rpx 2rpx 20rpx; // 内边距（上/右/下/左）
				box-shadow: 5rpx 5rpx 10rpx rgba(0, 201, 249, 0.6); // 边框阴影(x轴便宜/y轴便宜/模糊半径)
				border: 1rpx solid #ccc; // 边框宽度/颜色
				border-radius: 20rpx; // 圆角
			}

			button {
				height: 80rpx;
				margin: 20rpx 60rpx; // 外边距，两个参数(上下/左右)
				padding: 2rpx 20rpx 2rpx 20rpx; // 内边距（上/右/下/左）
				display: flex; // 一个row里面带了2个view，布局方式:弹性布局
				justify-content: center; // 水平居中
			}

			.title {
				height: 80rpx;
				margin: 20rpx 60rpx; // 外边距，两个参数(上下/左右)
				padding: 2rpx 20rpx 2rpx 20rpx; // 内边距（上/右/下/左）
				display: flex; // 一个row里面带了2个view，布局方式:弹性布局
				justify-content: center; // 水平居中
				align-items: center; // 垂直居中			
				border-radius: 15rpx;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
				background-color: #ddd;
			}

			uni-data-select {
				height: 80rpx;
			}

			.button {
				display: flex; // 弹性布局
				justify-content: center; // 垂直居中
				align-items: center;
				margin: 50rpx;
			}
		}
	}
</style>